<template>
  <div v-if="zfNameflag">
    <div class="first_header">
      <span style="font-weight: 600;float: left;font-size: 26px;line-height: 40px;">智能制造诊断评估</span>
      <el-date-picker
        style="width:140px;color:#fff;float: right;"
        v-model="yearSelect"
        type="year"
        :picker-options="pickerOptions"
        :clearable="false"
        :editable="false"
        value-format="yyyy"
        @change="yearChange">
      </el-date-picker>
      <el-select v-model="regionSelect" style="width: 90px;float: right;margin-right: 20px;" @change="regionChange">
        <el-option
          v-for="item in regionOptions"
          :key="item.cityCode"
          :label="item.cityName"
          :value="item.cityCode">
        </el-option>
      </el-select>
      <el-select v-model="industrySelect" style="width: 240px;float: right;margin-right: 20px;" @change="industryChange">
        <el-option
          v-for="item in industryOptions"
          :key="item.industryCode"
          :label="item.industryName"
          :value="item.industryCode">
        </el-option>
      </el-select>
    </div>
    <div class="isContent">
      <div class="mapContent">
        <div class="isContent_left">
          <div class="li" style="margin-bottom: 15px">
            <div class="isClrea" style="background: rgb(195, 227, 255)">
              <img src="../../../assets/img/entQty.png" alt="" width="36px" height="36px"/>
            </div>
            <div class="li_right">
              <span>化工企业数</span>
              <span>{{entQty}}</span>
            </div>
          </div>
          <div class="li" style="margin-bottom: 15px">
            <div class="isClrea" style="background: rgb(213, 245, 232)">
              <img src="../../../assets/img/gsEntQty.png" alt="" width="36px" height="36px"/>
            </div>
            <div class="li_right">
              <span>规上化工企业数</span>
              <span>{{gsEntQty}}</span>
            </div>
          </div>
          <div class="li">
            <div class="isClrea" style="background: rgb(254, 245, 201)">
              <img src="../../../assets/img/ansEntQty.png" alt="" width="36px" height="36px"/>
            </div>
            <div class="li_right">
              <span>已诊断企业数</span>
              <span>{{ansEntQty}}</span>
            </div>
          </div>
          <div class="li">
            <div class="isClrea" style="background: rgb(249, 217, 221)">
              <img src="../../../assets/img/ansGsEntQty.png" alt="" width="36px" height="36px"/>
            </div>
            <div class="li_right">
              <span>已诊断规上化工企业数</span>
              <span>{{andGsEntQty}}</span>
            </div>
          </div>
        </div>
        <div class="isContent_right">
          <div class="istitle">
            <div></div>
            <span>各地区化工企业诊断情况</span>
          </div>
          <div id="myChart1" style="width: 100%; height: 300px"></div>
        </div>
      </div>
      <div class="isCenter">
        <div class="isCenterContent">
          <el-row :gutter="10">
            <el-col :span="8">
              <p class="head-title">企业诊断情况</p>
              <div class="head-body">
                <div id="myChart3" style="width: 100%; height: 300px"></div>
              </div>
            </el-col>
            <el-col :span="8">
              <p class="head-title">企业诊断平均得分占比</p>
              <div class="head-body">
                <div v-show="averageProportion.length > 0">
                  <div class="head-body-box" v-for="(item, index) in averageProportion" :key="index">
                    <div class="head-body-left" :style="{ 'margin-top': item.leftHeight }">
                      <el-row class="isMove">
                        <el-col :span="8">{{ item.fraction }}</el-col>
                        <el-col :span="8">{{ item.proportion }}%</el-col>
                        <el-col :span="8">{{ item.number }}家</el-col>
                      </el-row>
                      <el-row class="isMove" style="width: 35%;padding: 2px;padding-left: 0;background: #ffffff;">
                        <hr :style="{ background: colorList3[item.fraction] }" style="margin-top: 8px;box-sizing: border-box;width: 30%;height: 1px;border: none;float: left;"/>
                        <div :style="{ background: colorList3[item.fraction] }" style="margin-top: 5px;width: 8px;height: 8px;border-radius: 50%;float: left;"></div>
                        <span :style="{ color: colorList3[item.fraction] }" style="font-size: 16px; margin-left: 5px; float: left">{{ item.proportion }}%</span>
                      </el-row>
                    </div>
                    <el-tooltip class="item" effect="dark" :content="item.fraction" placement="top">
                      <div class="head-body-right" :style="{ height: item.height, background: colorList3[item.fraction] }" style="width: 50px; cursor: pointer"></div>
                    </el-tooltip>
                  </div>
                </div>
                <div v-show="averageProportion.length === 0" style="width: 100%;text-align: center;color: #909399;">
                  暂无数据
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <p class="head-title">各能力域诊断评分情况</p>
              <div class="head-body">
                <div id="myChart2" style="width: 100%; height: 300px"></div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10" style="margin: 20px 0">
            <el-col :span="8">
              <p class="head-title">已诊断企业排名情况</p>
              <div class="head-body">
                <el-table
                  :data="tableData1"
                  max-height="325px"
                  class="first-table"
                  :header-cell-style="{backgroundColor:'rgb(68, 114, 196)', color:'#FFFFFF'}"
                  :cell-class-name="tableRowClassName1">
                  <el-table-column type="index" label="排名" width="60" align="center"></el-table-column>
                  <el-table-column prop="name" label="企业名称"></el-table-column>
                  <el-table-column prop="score" label="诊断得分" width="80"></el-table-column>
                </el-table>
              </div>
            </el-col>
            <el-col :span="16">
              <p class="head-title">智能制造准备度指数</p>
              <div class="head-body">
                <div id="myChart4" style="width: 100%; height: 320px"></div>
              </div>
            </el-col>
          </el-row>
          <el-row style="margin: 20px 0">
            <el-col :span="24">
              <p class="head-title">智能制造水平分布情况</p>
              <div class="head-body" style="overflow: auto;height: 426px;">
                <div v-show="tableData3.length > 0">
                  <el-collapse>
                    <el-collapse-item v-for="field in tableData3" :key="field.field">
                      <template slot="title">
                        <div style="width: 95%;" class="collapse-title">
                          <span>{{field.field}}</span>
                          <div style="float: right;padding: 9px 0px 0px 0px;height: 40px;width: 80%;">
                            <div v-for="title in field.fieldTitleList" :key="title.titleName"
                              style="float: right;height: 30px;text-align: center;line-height: 30px;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;"
                              :style="{ width: title.rate, backgroundColor: colorList1[title.titleName] }">
                                <span>{{title.titleName}}[{{title.count}}]</span>
                            </div>
                          </div>
                        </div>
                      </template>
                      <div style="margin-top: 20px;">
                        <div style="width: 100%;padding-bottom: 20px;margin-top: 5px;" v-for="question in field.questionList" :key="question.description">
                            <span style="display:inline-block;margin-left: 25px;width: 380px;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;">
                              {{question.description}}
                            </span>
                          <div style="float: right;height: 48px;width: 65%;">
                            <div v-for="answer in question.answerList" :key="answer.titleName"
                              style="float: right;height: 24px;text-align: center;"
                              :style="{ width: answer.rate, backgroundColor: colorList2[answer.titleName], color: answer.titleName === 'FI' ? '#FFFFFF' : '#303133' }">
                              {{answer.titleName}}[{{answer.count}}]
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
                <div v-show="tableData3.length === 0" style="width: 100%;text-align: center;color: #909399;">
                  暂无数据
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row style="margin: 20px 0">
            <el-col :span="24">
              <p class="head-title">填报企业样本情况</p>
              <div class="head-body">
                <div>
                  <el-table
                    :data="tableData2"
                    max-height="325px"
                    class="first-table"
                    :cell-style="{padding:'6px 0px'}"
                    :header-cell-style="{backgroundColor:'rgb(165, 165, 165)', color:'#FFFFFF', padding:'6px 0px'}"
                    cell-class-name="first-table-row"
                    style="width: 100%;margin-bottom: 20px;"
                    :span-method="arraySpanMethod"
                    row-key="enterpriseName"
                    border
                  >
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-table
                          class="table-in-table second-table"
                          :data="props.row.datas"
                          cell-class-name="second-table-row"
                          :header-cell-style="{backgroundColor:'rgb(91, 155, 213)', color:'#FFFFFF', padding:'6px 0px'}"
                          :cell-style="{padding:'6px 0px'}"
                          style="width: 100%;"
                          row-key="fieldName"
                          :span-method="arraySpanMethod"
                          border
                        >
                          <el-table-column type="expand">
                            <template slot-scope="props">
                              <el-table
                                class="table-in-table"
                                :data="props.row.datas"
                                :cell-class-name="tableRowClassName2"
                                :header-cell-style="{backgroundColor:'rgb(112, 173, 71)', color:'#FFFFFF', padding:'6px 0px'}"
                                :cell-style="{padding:'6px 0px'}"
                                style="width: 100%;"
                                row-key="describe"
                                border
                              >
                                <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                                <el-table-column prop="describe" label="特征项描述"></el-table-column>
                                <el-table-column prop="result" label="提交结果" width="80" align="center"></el-table-column>
                              </el-table>
                            </template>
                          </el-table-column>
                          <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                          <el-table-column prop="fieldName" label="准备度域"></el-table-column>
                          <el-table-column prop="score" label="域得分" width="80" align="center"></el-table-column>
                          <el-table-column prop="level" label="域等级" width="80" align="center"></el-table-column>
                        </el-table>
                      </template>
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                    <el-table-column prop="enterpriseName" label="企业名称"></el-table-column>
                    <el-table-column prop="region" label="所在区域"></el-table-column>
                    <el-table-column prop="industry" label="所属行业"></el-table-column>
                    <el-table-column prop="evaluationTime" label="评估时间" width="160"></el-table-column>
                    <el-table-column prop="score" label="准备度得分" width="100" align="center"></el-table-column>
                    <el-table-column prop="level" label="准备度等级" width="100" align="center"></el-table-column>
                  </el-table>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import dd from 'gdt-jsapi';
const echarts = require('echarts')
export default {
  name: 'zfDiagnosticEvaluation',
  data () {
    return {
      entQty: 0,
      gsEntQty: 0,
      ansEntQty: 0,
      andGsEntQty: 0,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      colorList1: {
        '引领级': 'rgb(146, 208, 80)',
        '优化级': 'rgb(59, 161, 219)',
        '集成级': 'rgb(255, 192, 0)',
        '规范级': 'rgb(237, 125, 49)',
        '规划级': 'rgb(255, 71, 70)',
        '启动级': 'rgb(191, 191, 191)'
      },
      colorList2: {
        'FI': 'rgb(47, 85, 151)',
        'LI': 'rgb(143, 170, 220)',
        'PI': 'rgb(180, 199, 231)',
        'NI': 'rgb(218, 227, 243)',
        'NA': 'rgb(191, 191, 191)'
      },
      colorList3: {
        '0-20分': 'rgb(95, 226, 187)',
        '20-40分': 'rgb(255, 189, 62)',
        '40-60分': 'rgb(144, 155, 255)',
        '60-80分': 'rgb(130, 218, 91)',
        '80-100分': 'rgb(73, 183, 255)'
      },
      regionSelect: '',
      regionOptions: [
        { cityCode: '', cityName: '全省' }
      ],
      industrySelect: '',
      industryOptions: [
        { industryCode: '', industryName: '全部化工行业' }
      ],
      yearSelect: '',
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > new Date(new Date().getFullYear(), new Date().getMonth(), 0)
        }
      },
      option1: '',
      option2: '',
      option3: '',
      option4: '',
      myChart1: '',
      myChart2: '',
      myChart3: '',
      myChart4: '',
      option1XData: [],
      option1Data: [],
      option2XData: [],
      option2Data: [],
      option3Data: 0,
      option3Title: '暂无数据',
      option4XData: [],
      option4Bar1Data: [],
      option4Bar2Data: [],
      option4Bar3Data: [],
      option4Bar4Data: [],
      option4Bar5Data: [],
      averageProportion: [],
      zfNameflag: true
    }
  },
  // created () {
  //   dd.getAuthCode({}).then(res =>{
  //     if (res) {
  //       let params = {
  //         applicationFlag: '20',
  //         authCode: res.auth_code
  //       }
  //       this.$http.post(`/home/sys/loginfree/authentication`, params)
  //         .then(({ data: res }) => {
  //           console.log('res2:',res);
  //           this.$store.commit('zfName', res.data.lastName)
  //           if (res.code !== 0) {
  //             this.zfNameflag = false
  //           }
  //         }).catch(() => {
  //           this.zfNameflag = false
  //         })
  //     }
  //   }).catch(() => {
  //     this.zfNameflag = false
  //   })
  // },
  mounted () {
    this.yearSelect = new Date().getFullYear() + ''
    this.getSelectList()
    this.getData()
  },
  methods: {
    getSelectList () {
      this.$http
        .get(`/home/consult/consultQuestionnaireQuestion/getConsultIndustryList`)
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.industryOptions = [...this.industryOptions, ...res.data]
          } else {
            this.$message.warning(res.msg)
          }
        })
      this.$http
        .get(`/home/consult/consultQuestionnaireQuestion/getConsultCityList`)
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.regionOptions = [...this.regionOptions, ...res.data]
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    getData () {
      this.$http
        .post(`/home/consult/consultQuestionnaireQuestion/getConsultInitZF`, {
          industryCode: this.industrySelect,
          cityCode: this.regionSelect,
          years: this.yearSelect
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.entQty = res.data.entQty
            this.gsEntQty = res.data.gsEntQty
            this.ansEntQty = res.data.ansEntQty
            this.andGsEntQty = res.data.andGsEntQty

            this.option1XData = res.data.ansEntQtyView.cityName
            this.option1Data = res.data.ansEntQtyView.entQty

            if (res.data.domainAveScoreChart && res.data.domainAveScoreChart.length > 0) {
              this.option2XData = res.data.domainAveScoreChart.map(item => {
                return {
                  name: item.name,
                  max: item.maxScore
                }
              })
              this.option2Data = res.data.domainAveScoreChart.map(item => {
                return item.aveScore
              })
            } else {
              this.option2XData = [
                { name: '控制系统域', max: 12.0 },
                { name: '设备设施域', max: 12.0 },
                { name: '网络支撑域', max: 9.0 },
                { name: '计划调度域', max: 12.0 },
                { name: '质量管理域', max: 13.0 },
                { name: '设备管理域', max: 12.0 },
                { name: '能源管理域', max: 17.0 },
                { name: '安全环保域', max: 13.0 }
              ]
              this.option2Data = [0, 0, 0, 0, 0, 0, 0, 0]
            }

            if (this.entQty !== 0) {
              this.option3Data = (this.ansEntQty / this.entQty * 100).toFixed(2)
              this.option3Title = this.ansEntQty + '/' + this.entQty
            } else {
              this.option3Data = 0
              this.option3Title = '暂无数据'
            }

            this.option4XData = res.data.domainReadinessIndex.domainName
            this.option4Bar1Data = res.data.domainReadinessIndex.minValue
            this.option4Bar2Data = res.data.domainReadinessIndex.quarterValue
            this.option4Bar3Data = res.data.domainReadinessIndex.halfValue
            this.option4Bar4Data = res.data.domainReadinessIndex.threeFourthsValue
            this.option4Bar5Data = res.data.domainReadinessIndex.maxValue

            this.averageProportion = res.data.entAveScore
            if (res.data.entAveScore && res.data.entAveScore.length > 0) {
              this.averageProportion.forEach((item) => {
                item.proportion = item.proportion * 100
                item.height = 300 * (item.proportion / 100) + 'px'
                item.leftHeight = 300 * (item.proportion / 100) - 22 + 'px'
              })
            }

            this.tableData1 = res.data.topTenEnt
            this.tableData2 = res.data.entSampleSituation
            this.tableData3 = res.data.distribution

            this.tableData3.forEach(fieldData => {
              let initFieldTitle = [
                { titleName: '引领级', rate: '6%', count: 0 },
                { titleName: '优化级', rate: '6%', count: 0 },
                { titleName: '集成级', rate: '6%', count: 0 },
                { titleName: '规范级', rate: '6%', count: 0 },
                { titleName: '规划级', rate: '6%', count: 0 },
                { titleName: '启动级', rate: '6%', count: 0 }
              ]
              fieldData.fieldTitleList.forEach(fieldTitleData => {
                initFieldTitle.forEach(item => {
                  if (item.titleName === fieldTitleData.titleName) {
                    item.count = fieldTitleData.count
                    let rate = Number(fieldTitleData.rate.replace('%', '')) * 0.64
                    item.rate = (Math.floor((rate + 6) * 100) / 100) + '%'
                  }
                })
              })
              fieldData.fieldTitleList = initFieldTitle

              fieldData.questionList.forEach(question => {
                let initAnswerTitle = [
                  { titleName: 'FI', rate: '6%', count: 0 },
                  { titleName: 'LI', rate: '6%', count: 0 },
                  { titleName: 'PI', rate: '6%', count: 0 },
                  { titleName: 'NI', rate: '6%', count: 0 },
                  { titleName: 'NA', rate: '6%', count: 0 }
                ]
                question.answerList.forEach(answer => {
                  initAnswerTitle.forEach(item => {
                    if (item.titleName === answer.titleName) {
                      item.count = answer.count
                      let rate = Number(answer.rate.replace('%', '')) * 0.7
                      item.rate = (Math.floor((rate + 6) * 100) / 100) + '%'
                    }
                  })
                })
                question.answerList = initAnswerTitle
              })
            })

            this.renderMyChart1()
            this.renderMyChart2()
            this.renderMyChart3()
            this.renderMyChart4()
          } else {
            this.$message.warning(res.msg)
          }
        })
    },
    yearChange (value) {
      this.yearSelect = value
      this.getData()
    },
    regionChange (value) {
      this.regionSelect = value
      this.getData()
    },
    industryChange (value) {
      this.industrySelect = value
      this.getData()
    },
    tableRowClassName1 ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'ranking-table-row1'
      } else {
        return 'ranking-table-row2'
      }
    },
    tableRowClassName2 ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'third-table-row1'
      } else {
        return 'third-table-row2'
      }
    },
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (!row.datas) {
        if (columnIndex === 0) {
          return [0, 0]
        } else if (columnIndex === 1) {
          return [1, 2]
        }
      }
    },
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('myChart1'))
      this.option1 = {
        legend: {
          top: '1%',
          right: '1%'
        },
        color: ['rgb(84,112,198)'],
        grid: {
          top: '10%',
          bottom: '15%'
        },
        yAxis: {
          show: true,
          min: 0
        },
        xAxis: {
          show: true,
          type: 'category',
          axisLine: true,
          data: this.option1XData,
          axisLabel: {
            interval: 0,
            rotate: 40,
            width: 60,
            overflow: 'break'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
          {
            name: '已诊断规上企业数',
            data: this.option1Data,
            type: 'bar',
            min: 0,
            stack: 'total',
            barWidth: '20px',
            backgroundStyle: {
              color: 'rgba(207, 207, 207, 1)'
            }
          }
        ]
      }
      this.myChart1.setOption(this.option1)
    },
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('myChart2'))
      this.option2 = {
        tooltip: {
          trigger: 'item',
          confine: true
        },
        radar: {
          indicator: this.option2XData
        },
        series: [
          {
            name: '各能力域诊断评分情况',
            type: 'radar',
            data: [
              {
                value: this.option2Data
              }
            ]
          }
        ]
      }
      this.myChart2.setOption(this.option2)
    },
    renderMyChart3 () {
      this.myChart3 = echarts.init(document.getElementById('myChart3'))
      this.option3 = {
        backgroundColor: '#FFF',
        grid: {
          containLabel: true
        },
        series: [{
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            // roundCap: true,
            clip: false,
            width: 10,
            itemStyle: {
              color: 'rgb(68, 114, 196)'
            }
          },
          axisLine: {
            lineStyle: {
              width: 20,
              color: [[1, 'rgba(23, 25, 29, 0.05)']]
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          data: [
            {
              value: this.option3Data,
              name: this.option3Title,
              title: {
                offsetCenter: ['0%', '30%']
              },
              detail: {
                offsetCenter: ['0%', '-10%']
              }
            }
          ],
          title: {
            fontSize: 20,
            color: 'rgb(68, 114, 196)'
          },
          detail: {
            width: 50,
            height: 14,
            fontSize: 40,
            color: 'rgb(68, 114, 196)',
            formatter: '{value}%'
          }
        }]
      }
      this.myChart3.setOption(this.option3)
    },
    renderMyChart4 () {
      this.myChart4 = echarts.init(document.getElementById('myChart4'))
      this.option4 = {
        color: ['rgb(237, 125, 49)', 'rgb(165, 165, 165)', 'rgb(255, 192, 0)', 'rgb(91, 155, 213)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            let level1 = params[0].value + params[1].value
            let level2 = level1 + params[2].value
            let level3 = level2 + params[3].value
            let level4 = level3 + params[4].value
            return params[4].seriesName + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;' + level3.toFixed(2) + '-' + level4.toFixed(2) + '分' + '<br>' +
              params[3].seriesName + '&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;' + level2.toFixed(2) + '-' + level3.toFixed(2) + '分' + '<br>' +
              params[2].seriesName + '&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;' + level1.toFixed(2) + '-' + level2.toFixed(2) + '分' + '<br>' +
              params[1].seriesName + '&nbsp;:&nbsp;&nbsp;' + params[0].value.toFixed(2) + '-' + level1.toFixed(2) + '分' + '<br>'
          }
        },
        legend: {
          left: 'right',
          data: ['0%-25%', '25%-50%', '50%-75%', '75%-100%']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          data: this.option4XData
        },
        yAxis: {
          type: 'value',
          min: 0
        },
        series: [
          {
            name: '',
            barWidth: 40,
            type: 'bar',
            stack: '总量',
            show: false,
            itemStyle: {
              barBorderColor: 'rgba(0,0,0,0)',
              color: 'rgba(0,0,0,0)'
            },
            emphasis: {
              itemStyle: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)'
              }
            },
            data: this.option4Bar1Data
          },
          {
            name: '75%-100%',
            type: 'bar',
            show: 'false',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: this.option4Bar2Data
          },
          {
            name: '50%-75%',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'bottom'
            },
            data: this.option4Bar3Data
          },
          {
            name: '25%-50%',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: this.option4Bar4Data
          },
          {
            name: '0%-25%',
            type: 'bar',
            stack: '总量',
            label: {
              show: false,
              position: 'top'
            },
            data: this.option4Bar5Data
          }
        ]
      }
      this.myChart4.setOption(this.option4)
    }
  }
}
</script>
<style lang="scss" scoped>
.first_header {
  width: 100%;
  height: 80px;
  // display: flex;
  justify-content: space-between;
  line-height: 1;
  background-color: #ffffff;
  padding: 20px;
}
.isContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #eee;
  padding: 20px;
  box-sizing: border-box;
  .mapContent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .isContent_left {
      width: 50%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      .li {
        width: 49%;
        height: 170px;
        background: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        .isClrea {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          margin: 0 10% 0 15%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .li_right {
          display: flex;
          flex-direction: column;
        }
        .li_right > span:first-child {
          font-size: 16px;
          color: #666;
          margin-bottom: 10px;
        }
        .li_right > span:last-child {
          font-size: 20px;
          color: #000;
        }
      }
    }
    .isContent_right {
      width: 49%;
      background: #fff;
      padding: 10px;
      box-sizing: border-box;
      .istitle {
        display: flex;
        align-items: center;
      }
      .istitle > div:first-child {
        height: 30px;
        width: 5px;
        background: #5b8ff9;
        margin-right: 5px;
      }
      .istitle > span {
        font-size: 18px;
      }
    }
  }
  .isCenter {
    background: #fff;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    .isCenterTitle {
      border-bottom: 1px solid #eee;
      padding: 20px;
      font-size: 16px;
    }
    .isCenterContent {
      padding: 20px;
      .tabs {
        display: flex;
      }
      .tabs > div {
        margin-right: 10px;
        min-width: 200px;
        height: 50px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
      .selectButton {
        background: #37a2fe;
        color: #fff;
      }
    }
  }
}
.head-title {
  border: 1px solid #eee;
  padding: 16px 0;
  text-indent: 1em;
  font-size: 16px;
}
.head-body {
  border: 1px solid #eee;
  height: 368px;
  border-top: 0;
  padding: 20px;
  overflow: hidden;
  .head-body-box {
    width: 100%;
    overflow: hidden;
    .head-body-left {
      width: 80%;
      overflow: hidden;
    }
    .head-body-right {
      width: 20%;
      margin-bottom: 5px;
      float: right;
    }
  }
}
.head-body-box > div {
  float: left;
}
.isMove {
  width: 65%;
  padding: 3px;
  background: #eee;
  overflow: hidden;
  float: left;
}
.isMove > div {
  float: left;
  text-align: center;
}
  /deep/ .ranking-table-row1 {
    background-color: rgb(255, 255, 255);
  }
  /deep/ .ranking-table-row2 {
    background-color: rgb(206, 238, 252);
  }
  /deep/ .el-table__expanded-cell {
    border-bottom: 0px;
    border-right: 0px;
    padding: 0px 0px 0px 47px;
  }
  .table-in-table {
    border-top: 0px;
  }
  /deep/ .first-table-row {
    background-color: rgb(225, 225, 225);
  }
  .first-table /deep/ .el-table__expanded-cell {
    background-color: rgb(240, 240, 240);
    &:hover{
      background-color: rgb(240, 240, 240) !important;
    }
  }
  /deep/ .second-table-row {
    background-color: rgb(210, 222, 239);
  }
  .second-table /deep/ .el-table__expanded-cell {
    background-color: rgb(234, 239, 247);
    &:hover{
      background-color: rgb(234, 239, 247) !important;
    }
  }
  /deep/ .third-table-row1 {
    background-color: rgb(213, 227, 207);
  }
  /deep/ .third-table-row2 {
    background-color: rgb(235, 241, 233);
  }
  /deep/ .el-table__body .is-center .cell {
    padding-left: 0;
    padding-right: 0;
  }
  .collapse-title {
    flex: 1 0 90%;
    order: 1;
  }
</style>
